<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树型目录结构</title>
    <style>
        ul,li{
            list-style: none;
        }
        span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #369;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            color:#fff;
            user-select: none;
            cursor: pointer;
        }
    </style>


</head>
<body>
    <ul id="treeList">

    </ul>

    <script>
         var treeNodes = [
            {
                name:'IT互联网',
                children:[
                    {name:'后端开发',children:[
                        {name:'java',children:[
                            {name:'jsp/servlet',children:[]},
                            {name:'开源框架',children:[]},
                            {name:'nosql',children:[]},
                            {name:'mq',children:[]},
                            {name:'es',children:[]}
                        ]},
                        {name:'c/c++',children:[]},
                        {name:'python',children:[]}
                    ]},
                    {name:'前端开发',children:[
                        {name:'html',children:[]},
                        {name:'css',children:[]},
                        {name:'javascript',children:[]}
                    ]},
                    {name:'移动开发',children:[]},
                    {name:'游戏开发',children:[]}
                ]
           },
           {
               name:'UI设计',
               children:[
                   {name:'PC端设计',children:[]},
                   {name:'移动端设计',children:[]},
                   {name:'小程序设计',children:[]}
               ]
           }
        ];

        //递归
        var str=``;
        window.onload=function(){
            var treeList=document.querySelector("#treeList");
            treeList.innerHTML=createTree(treeNodes);

        var spans=document.querySelectorAll("#treeList ul li span ");
        for(var i=0 ;i<spans.length;i++){
            spans[i].onclick=function(){
                var ul=this.parentElement.nextElementSibling;
                ul.style.display=ul.style.display=="none"?"block":"none";
                this.innerHTML=this.innerHTML=="-"?"+":"-";
            }
        }


            
        }

        function createTree(nodes){
            var  str=`<ul>`;
            for(var i=0 ;i<nodes.length;i++){
                str+=`<li><span>-</span>${nodes[i].name}</li>`;
                str+=createTree(nodes[i].children);
            }
            str+=`</ul>`;
            return str;
        }
        
        
    </script>
</body>
</html>